<template>
	<div class="collection-card">
		<div :class="['header-warp']" v-if="showHeader">
			<div class="title">
				<image v-if="state === -1" class="image-icon-md icon-offset--md mr-1"
					src="@/static/icons/icon-work-report.png"></image>
				<!-- <image v-if="state !== -1" class="image-icon-md icon-offset--md mr-1" src="@/static/icons/icon-qty.png">
				</image> -->
				<slot name="title"></slot>
			</div>
			<div class="state state-color" v-show="state !== -1">
				<span :class="CardStateClass">{{CardState}}</span>
			</div>
		</div>

		<div class="content bg-white">
			<slot></slot>
			<div class="exception-tip" v-if="exception">
				<span class="">
					<image class="image-icon-md error-icon" src="@/static/icons/icon-exception.png"></image>
				</span>
				<slot name="error"></slot>
			</div>
		</div>
		<div class="card-title bg-white">
			<div class="title-warp">
				
				<div class="suffix text-grey-300">
					<slot name="progress"></slot>
				</div>
				
				<div class="prefix" v-if="state !== -1">
					<div class="icon">
						<slot name="icon"></slot>
					</div>
					<div>
						<slot name="user"></slot>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		name: "CollectionInfoCard",
		props: {
			showHeader:{
				type: Boolean,
				default: true
			},
			state: {
				type: [Number,String],
				default: -1
			},
			report: {
				type: Boolean,
				default: true
			},
      exception:{
        type: Boolean,
        default: false
      }
		},
		data() {
			return {
				card: {
					expand: false
				}
			};
		},
		computed: {
			isCardExpand() {
				return this.card.expand
			},
			foldButtonText() {
				return this.card.expand ? "展开" : "收起"
			},
			CardState() {
				let o = {
					'1': '',
					'0': ''
				}
				let value = o[this.state]
				if (!value) {
					return o['-1']
				}
				return value
			},
			CardStateClass() {
				let o = {
					'1': 'success',
					'0': 'success',
				}
				let value = o[this.state]
				if (!value) {
					return o['-1']
				}
				return value
			},
			headerStateClass() {
				let classes = 'state-color--title '
				if (this.state == -1) {
					classes += 'primary'
				} else {
					classes += 'success'
				}
				return classes
			}
		},
		methods: {
			expand() {
				this.card.expand = !this.card.expand
			}
		},
	}
</script>

<style lang="scss" scoped>
	.collection-card {
		border-radius: 14rpx;
		overflow: hidden;
		margin: 22rpx 0;

		.header-warp {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 18rpx 22rpx;
			background-color: #fff;

			.title {
				position: relative;
				top: -3px;
				font-weight: 600;
			}

			.header-fold {
				font-size: 32rpx;
				cursor: pointer;

				.arrow {
					position: relative;
					bottom: 3px;
					margin-left: 8rpx;
					transition: all ease-in-out .2s;

					&.fold {
						transform: rotate(180deg);
					}
				}

			}
		}

		.content {
			min-height: 32rpx;
			padding: 18rpx 22rpx;
			font-size: 30rpx;
			color: #7f7f7f;

			.exception-tip {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #ff1c1f;
				font-weight: 600;

				.error-icon {
					position: relative;
					top: 3px;
					margin-right: 12rpx;
				}
			}
		}

		.card-title {
		
			.title-warp {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 22rpx;
				font-size: 28rpx;
				color: #7f7f7f;

				.prefix {
					display: flex;
					flex-direction: row;
					align-items: center;


					.icon {
						position: relative;
						top: 3px;
						margin-right: 8rpx;
					}

				}

			}
		}
	}
</style>